

<template>
<div class="aside">
  <el-tabs v-model="contract" class="jd-tabs" stretch >
<!-- 推荐商品列表 -->
    <el-tab-pane label="推荐商品" name="contract">
      <!-- 推荐商品列表组件 -->
      <consult/>
    </el-tab-pane>
    <!-- 订单列表 -->
    <el-tab-pane label="我的订单" name="order">
      <!-- 订单列表组件 -->
      <OrderList/>
    </el-tab-pane>
  </el-tabs>
</div>
</template>
<script setup>

import {ref} from "vue";
import OrderList from "@/views/customer/components/OrderList.vue";
import Consult from "@/views/customer/components/consult.vue";
const contract = ref("contract");
</script>
<style scoped>
.aside{
  width: 100%;
  height: 100%;
  border-left: solid 1px lightgray;
}
.jd-tabs :deep(.el-tabs__item.is-active)
{
  color: #E96265;
}
.jd-tabs :deep(.el-tabs__nav-wrap::after){
  background-color: lightgray;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
}
.jd-tabs :deep(.el-tabs__active-bar){
  top: 0;
  background-color: #E96265;
}
</style>
